<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style>

</style>
<script>
    console.log( 123 );
    console.log( 123 );
    console.log( 123 );
</script>
</head>
<body>
    
<div class="box">
    <h1>标题</h1>
    <p>内容1111111111</p>
    <p>内容1111111111</p>
    <p>内容1111111111</p>
</div>

<!-- 
    事件循环相关概念
    要掌握好事件循环机制，需要了解浏览器中的相关进程和线程

    进程
    进行中的程序，是CPU资源分配的最小单位
    进程之间的资源是相互独立互不影响
    一个进程可以有一个或多个线程

    线程
    程序的执行路线（执行流），是CPU任务调度的最小单位
    线程是建立在进程之上的一次程序运行单位

    单线程，多个任务程序只有一个线程来执行
    多线程，多个任务程序有多个线程来执行

    浏览器的主要进程：
    Broswer进程，浏览器的主进程
    GPU进程，主要处理3D绘制
    第三方插件进程，主要负责插件运行管理
    渲染进程，主要负责页面渲染、处理脚本、事件处理等工作
        浏览器每一个标签页都会新建一个渲染进程

    浏览器渲染进程中的主要线程：
        GUI渲染线程，主要负责页面渲染
        渲染页面主要流程：
            1.从上到下解析html标签，构建DOM Tree(节点树)
            2.解析CSS样式，构建CSSOM Tree(样式树)
            3.根据节点树和样式树计算生成Rendering Tree(渲染树)
            4.根据渲染树在浏览器中绘制页面
        
            重绘，元素自身的变化不会影响其他元素（颜色、背景色等）
            重排，元素自身的变化会影响其他元素（尺寸大小、位置等）

        
        JS引擎线程，主要负责解析执行JS脚本（V8引擎）
            页面中的所有JS脚本只有JS引擎线程能解析执行
            当解析html文档遇到script标签时，GUI渲染线程暂停工作，JS引擎线程开始工作
            GUI渲染线程和JS引擎线程是互斥的关系！！！
            JS脚本执行会阻塞页面渲染！！！


        事件触发线程，主要负责事件的管理和控制
        事件触发线程管理着一个事件队列/任务队列（task queue）[f1, f2]
        当js异步事件（鼠标点击、鼠标进入、计时器、ajax异步请求等）有结果时或符合触发条件时，对应的回到函数会被加入事件队列中，等待JS引擎线程空闲时来处理


        计时器线程，主要负责给某函数计时
        当前计时器线程给某个函数计时时间到了，该函数会被加入事件队列中，等待JS引擎线程空闲时来处理
        setTimeout(function f1(){},10)
        setTimeout()执行时，就是告诉计时器线程，给f1函数计时10毫秒


        异步http请求线程
        当我们发送一个ajax异步请求时，异步http请求线程等待请求响应状态改变，并将对应的回到函数加入事件队列中，等待JS引擎线程空闲时来处理
        ajax({
            url: 'http://localhost:8080/login',
            type: 'post',
            data: 'user=xiaocuo&pass=12345',
            success: function f2(){
                // 请求成功的回到函数
            },
            error: function f3(){
                // 请求失败的回到函数
            }
        })
        
 -->
<script>
    console.log( 123 );
    console.log( 123 );
    console.log( 123 );
</script>
</body>
</html>